<template>
  <div id="microRelease">
    <c-title :hide="false" text="编辑帖子"></c-title>
    <div class="content">
      <div class="uploadphotolist">
        <yz_uploader v-model="imgData" ref="uploader" isCustomStyleType="del_btn"></yz_uploader>
        <div class="textInput">
          <div class="titleinp">
            <div class="required-field">*</div>
            <input type="text" v-model="releasetitle" placeholder="填写标题会更有赞哦~" />
          </div>
          <div class="contentinp">
            <!-- <div class="required-field">*</div> -->
            <textarea name="" v-model="releasecontents" placeholder="添加正文"></textarea>
          </div>
        </div>
      </div>


      <div class="cell"  @click="getClassification">
        <div class="flex-center">
          <i class="iconfont icon-daifahuo1"></i>
          <div class="bold fz-28 flex-center"><div class="required-field">*</div>选择分类</div>
        </div>
        <div style="display: flex;align-items: center;">
          <span  style="font-size: 0.8125rem;margin-right: 0.4375rem;color: #00001C;">{{ catname }}</span>
          <i class="fa fa-angle-right"></i>
        </div>
      </div>

      <div class="messageadd">
        <ul>
          <template v-if="audio_open">
            <!-- 音频上传和录音 -->
            <audioUpload v-on:uploaderAudio="updataAudio"></audioUpload>
            <!-- 上传的音频播放 -->
            <audioSlider v-for="(item, index) in audioList" :key="index" :src="item.file" :duration="item.duration">
              <!-- 组件插槽 -->
              <!-- 删除按钮 -->
                <i class="iconfont icon-guanbi" style="font-size: 0.6875rem;padding-left:1.25rem;" @click.stop="delAudio(index)"></i>
            </audioSlider>
          </template>

          <!-- <li @click="getClassification">
            <div class="left">
              <div class="required-field">*</div>
              <img v-if="catidshow" src="../../assets/images/micro_communities/publish_select_class_cur@2x.png" alt="" />
              <img v-else src="../../assets/images/micro_communities/publish_select_class@2x.png" alt="" />
            </div>
            <div class="right">
              <div class="inforselection" :class="{ selecolor: catidshow }">
                <div class="inf_left">{{ catname ? catname : "选择分类" }}</div>
                <div class="inf_right">
                  <i class="fa fa-angle-right"></i>
                </div>
              </div>
            </div>
          </li> -->
          <li @click="getReleaseAddress">
            <div class="left">
              <i class="iconfont icon-dizhi1"></i>
            </div>
            <div class="right">
              <div class="inforselection" :class="{ selecolor: releaseaddressshow }">
                <div class="inf_left">{{ releaseaddress ? releaseaddress : "添加地点" }}</div>
                <div class="inf_right">
                  <i class="fa fa-angle-right"></i>
                </div>
              </div>
            </div>
          </li>
          <li  v-if="goods_open == 0" :class="goodsIdshow?'column':''">
            <div class="flex-center" style="width: 100%;">
              <div class="left">
                <i class="iconfont icon-a-ht_basis_shangpin_huaban1_huaban1"></i>
              </div>
              <div class="right">

                  <div class="inforselection" @click="getGoodsMessage">
                    <div class="inf_left">添加商品</div>
                    <div class="inf_right">
                      <i class="fa fa-angle-right"></i>
                    </div>
                  </div>
              </div>
            </div>
            <div  v-if="goodsIdshow"class="selectgoods">
                <div class="selectgoodsleft">
                  <div class="goleft">
                    <img :src="selectgoodsData.thumb" alt="" />
                  </div>
                  <div class="gocenter">
                    <div class="goodsname">{{ selectgoodsData.title }}</div>
                    <div class="fobottom">
                      <div class="foleft">
                        <div class="pic">{{ $i18n.t("money") }}{{ selectgoodsData.price }}</div>
                        <div class="delpic">{{ $i18n.t("money") }}{{ selectgoodsData.market_price }}</div>
                      </div>
                      <div class="foright">
                        <div class="sold">已售{{ selectgoodsData.show_sales }}件</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="selectgoodsright">
                  <div class="goright" @click.stop="getGoodsMessage">
                    更换
                  </div>
                </div>
            </div>
          </li>
          <li  :class="selectgoodsData?'column':''" v-if="store_open == 0">
            <div class="flex-center" style="width: 100%;">
              <div class="left">
                <i class="iconfont icon-shanghu"></i>
              </div>
              <div class="right">
                  <div class="inforselection" @click="getStoreMessage">
                    <div class="inf_left">添加门店</div>
                    <div class="inf_right">
                      <i class="fa fa-angle-right"></i>
                    </div>
                  </div>
              </div>
            </div>
            <div class="selectgoods store-list"   v-if="storeIdshow">
                <div class="selectgoodsleft" v-if="!fun.isTextEmpty(selectgoodsData)">
                  <div class="goleft">
                    <img :src="selectstoreData.thumb" alt="" />
                  </div>
                  <div class="gocenter">
                    <div class="shopname">{{ selectstoreData.store_name }}</div>
                    <div class="start_1">
                      <van-icon v-for="(item,index) in 5"   :size="10" :key="index" name="star"   :color="item<=selectstoreData.average_score?'#FF9C43':'#D6D6DC'" style="margin:0 0.0938rem;"/>
                    </div>
                    <div class="gocenter-bottom">{{ selectstoreData.address }}</div>
                  </div>
                </div>
                <div class="selectgoodsright">
                  <div class="goright" @click="getStoreMessage">
                    更换
                  </div>
                </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="Releasebtn set-pc-styleLeft" :class="{'w375': fun.isPc()}">
      <div class="user_protocol">
        <van-checkbox v-model="checked">阅读并同意<span class="us_color" @click.stop="openProtocol">《用户协议》</span></van-checkbox>
      </div>
      <div class="submit" @click="submitBtn">保存修改</div>
    </div>
    <van-popup v-model="classificationshow" position="bottom" style="width: 100%; height: 80%;" round>
      <div class="classification">
        <van-nav-bar title="选择分类"  @click-left="onClickLeft" @click-right="onClickRight" >
          <div slot="right" class="category-close">
            <i class="iconfont icon-guanbi" style="font-size: 0.75rem;"></i>
          </div>
          </van-nav-bar>
        <div class="searchbox">
          <div class="left">
            <div class="searchion"><i class="iconfont iconfont icon-sousuo1"></i></div>
            <div class="textinp">
              <van-field v-model="commodityTitle" placeholder="搜索分类" :clearable="true" />
            </div>
          </div>
          <div class="right" @click="searchBtn">搜索</div>
        </div>
        <div class="classification_list">
          <ul v-for="(item, i) in catelist" :key="i">
            <li>
              <div class="one_cat">{{ item.name }}</div>
              <div class="two_cat">
                <div class="childs-name" @click="selectCateId(item.id, item.name)" :class="[catid == item.id ? 'color_text' : '']">全部</div>
                <div class="childs-name" @click="selectCateTwoId(childs.id, item.name, childs.name)" v-for="childs in item.child" :key="childs.id" :class="[catid == childs.id ? 'color_text' : '']">
                  {{ childs.name }}
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </van-popup>
    <van-popup  v-model="Locationshow"  position="bottom" style="width: 100%; height: 80%;" :lazy-render="false" round>
      <div class="Locations">
        <van-nav-bar title="选择地点" @click-left="onAddressLeft" @click-right="onAddressRight" >
          <div slot="right" class="category-close">
            <i class="iconfont icon-guanbi" style="font-size: 0.75rem;"></i>
          </div>
        </van-nav-bar>
        <div class="searchbox">
          <van-search v-model="address_detail" placeholder="输入您所在的地点" shape='round' style="flex:1;"/>

          <!-- <div class="right" @click="search_location">搜索</div>
            <div class="left">
              <div class="searchion"><i class="iconfont iconfont icon-sousuo1"></i></div>
              <div class="textinp">
                <input type="text" v-model="address_detail" id="suggestId" name="address_detail" placeholder="输入您所在的地点" />
              </div>
            </div> -->

        </div>
        <div>
          <van-cell-group :border="false">
            <van-cell value="不显示位置" @click="address_detail=''"/>
            <van-cell v-for="(item,i) in location_list"  :key="i"  @click="cell_handle(item)">
              <template #title>
                <div style="text-align: left;">{{item.name}}</div>
              </template>
              <template #label>
                <div style="text-align: left;">{{ item.address }}</div>
              </template>
            </van-cell>
          </van-cell-group>
        </div>

      </div>
    </van-popup>
    <van-popup  v-model="addgoodslistshow"  @opened="open_handle('goods')"  position="bottom" style="width: 100%; height: 80%;" round id="scrollGoods"  @closed="close_handle('goods')">
      <div class="addgoodslist">
        <van-nav-bar title="添加商品"   @click-left="onAddGoodsLeft" @click-right="onAddGoodsRight" >
        <div slot="left" class="goods-popup-left">
            暂不添加
          </div>
          <div slot="right" class="category-close">
            <i class="iconfont icon-guanbi" style="font-size: 0.75rem;"></i>
          </div>
        </van-nav-bar>
        <div class="searchbox">
          <div class="left">
            <div class="searchion"><i class="iconfont iconfont icon-sousuo1"></i></div>
            <div class="textinp">
              <van-field v-model="goodsdata" placeholder="搜索商品标题" :clearable="true" />
            </div>
          </div>
          <div class="right" @click="searchGoodBtn">搜索</div>
        </div>
        <van-pull-refresh v-model="isLoading" @refresh="loadTop" success-text="刷新成功">
          <div class="addgoodslist_list">
            <ul>
              <li v-for="(item, index) in goodslistData" @click="setGoodsId(item.id)" :key="index">
                <div class="left">
                  <img :src="item.thumb" alt="" />
                </div>
                <div class="center">
                  <div class="top">{{ item.title }}</div>
                  <div class="bottom">
                    <div class="picleft">{{ $i18n.t("money") }}{{ item.price }}</div>
                    <div class="picright">原价：{{ $i18n.t("money") }}{{ item.market_price }}</div>
                  </div>
                </div>
                <div :class="goodsId == item.id?'right-current':'right'">
                  <van-icon name="success"  color="#fff"  v-if="goodsId == item.id"/>
                </div>
              </li>
            </ul>
          </div>
        </van-pull-refresh>
      </div>
    </van-popup>
    <van-popup  v-model="storeshow"   @opened="open_handle()" position="bottom" style="width: 100%; height: 80%;" round id="scrollstore" @closed="close_handle">
      <div class="storelist">
        <van-nav-bar title="添加门店"  left-text="暂不添加"  @click-left="onStoreLeft" @click-right="onStoreRight" >
        <div slot="right" class="category-close">
            <i class="iconfont icon-guanbi" style="font-size: 0.75rem;"></i>
          </div>
        </van-nav-bar>
        <div class="searchbox">
          <div class="left">
            <div class="searchion"><i class="iconfont iconfont icon-sousuo1"></i></div>
            <div class="textinp">
              <van-field v-model="storedata" placeholder="搜索门店" :clearable="true" />
            </div>
          </div>
          <div class="right" @click="searchStoreBtn">搜索</div>
        </div>
        <van-pull-refresh v-model="isLoading" @refresh="loadTopStore" success-text="刷新成功">
          <div class="astorelist_list">
            <ul>
              <li v-for="(item, index) in storelistData" @click="setStoreId(item.id)" :key="index">
                <div class="left">
                  <img :src="item.thumb" alt="" />
                </div>
                <div class="center">
                  <div class="top">{{ item.store_name }}</div>
                  <div class="start_1">
                    <van-icon v-for="(number_item,index) in 5"   :size="10" :key="index" name="star"   :color="number_item<=item.average_score?'#FF9C43':'#D6D6DC'" style="margin:0 0.0938rem;"/>
                  </div>
                  <div class="fobottom">
                    <div class="area">{{ item.address }}</div>
                  </div>
                </div>
                <div :class="storeId == item.id?'right-current':'right'" >
                  <van-icon name="success" :size="12"  color="#fff"  v-if="storeId == item.id"/>
                </div>
              </li>
            </ul>
          </div>
        </van-pull-refresh>
      </div>
    </van-popup>
    <van-popup :overlay="false" v-model="protocolshow" position="right" style="width: 100%; height: 100%;">
      <div class="protocolcontent">
        <van-nav-bar title="用户协议" left-text="" right-text="" left-arrow @click-left="protocolLeft" />
        <div class="content" v-html="agreementcontent"></div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import microEdit_controller from "./microEdit_controller";
export default microEdit_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.w375{
  width: 375px;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
::v-deep .van-search {
  padding: 10px 0 10px 12px;
}
::v-deep .van-nav-bar__text {
  color: #6E6E79 !important;
  font-size: 0.875rem;
}
::v-deep .van-hairline--bottom::after{
  border: unset;
}
.goods-popup-left{
  font-weight: 400;
  font-size: 0.875rem;
  color: #6E6E79;
}
.column{
  flex-direction: column
}
.address-box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #F9F9F9;
  border-radius: 0.625rem ;
  width: 100%;
  color: #999;
  font-size: 0.8125rem;
  text-align: left;
  padding: 1.0938rem 0.75rem;
  line-height: 1;
  margin-bottom: 0.9375rem;
  .tips{
    text-align: left; color: #999;font-size: 0.8125rem;font-weight: 400;
  }
}
.store-list{
  .selectgoodsright{
    flex-shrink: 0;
  }
  .selectgoodsleft{
    flex:1;
  }
  .gocenter {
    flex:1;
  }
  .shopname {
      font-size: 0.84rem;
      line-height: 1;
      max-width: 10rem;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      text-align: left;
    }
    .start_1 {
      display: flex;
      line-height: 1;
      text-align: left;
      margin-bottom: 0.4688rem;
    }

    .gocenter-bottom {
      color: #999;
      font-size: 0.75rem;
      line-height: 1;
      max-width: 10rem;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      text-align: left;
    }
}

::v-deep  .imgUploader{
    padding: 0 !important;
  }
::v-deep .van-uploader__wrapper{
  height:100%;
}
::v-deep .imgUploader  .photoBox{
  width: 6.375rem;
  height: 6.375rem;
  border:none;
  border-radius: 0.5rem ;
  overflow: hidden;
}
::v-deep .imgUploader .van-uploader{
  width: 6.375rem;
  height: 6.375rem;
  border-radius: 0.5rem;
  border:unset;
  margin: 0;
  background-color: #F5F5F5;
}
::v-deep .imgUploader .van-uploader::after{
  content:"";
  position: absolute;
  left: 50%;
  top:50%;
  width: 1.25rem;
  height: 0.125rem;
  background-color:#AAAAB3;
  transform: translate(-50%,-50%);
}
::v-deep .van-nav-bar__title {
  color: #00001C;
  font-size: 1rem;
  font-weight: bold;
}
::v-deep .imgUploader .van-uploader::before{
  content:"";
  position: absolute;
  left: 50%;
  top:50%;
  height: 1.25rem;
  width: 0.125rem;
  background-color:#AAAAB3;
  transform: translate(-50%,-50%);
}
.flex-center{
  display: flex;
  align-items: center;
}
::v-deep .imgUploader .van-uploader .van-uploader__input-wrapper i{
  display: none;
}
.bold{
  font-weight: bold
}
.fz-28{
  font-size: 0.875rem;
}
.icon-daifahuo1,.icon-dizhi1,.icon-aixinshangpin,.icon-shanghu,.icon-a-ht_basis_shangpin_huaban1_huaban1,.icon-shangpin1{
  font-weight: bold;
  margin-right: 0.5rem;
}
.cell{
  margin: 0.75rem;
  border-radius: 0.5rem;
  background-color: #fff;
  padding: 0 0.625rem 0 0.75rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.category-close{
  background-color: #F0F0F1;width: 1.5rem;height: 1.5rem;border-radius: 50%;
  display: flex;align-items: center;justify-content: center;
}
#microRelease {
  .selectgoods {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #F9F9F9;
      border-radius: 0.625rem;
      padding: 0.625rem;
      margin-bottom: 0.9375rem;

      .selectgoodsleft {
        display: flex;
        align-items: center;

        .goleft {
          width: 3.125rem;
          height: 3.125rem;
          margin-right: 0.63rem;

          img {
            width: 100%;
            height: 100%;
          border-radius: 0.5rem;
          }
        }

        .gocenter {
          .goodsname {
            font-size: 0.84rem;
            line-height: 1rem;
            max-width: 8rem;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            text-align: left;
            margin-bottom: 0.75rem;
            padding-top: 0.2rem;
          }

          .fobottom {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .foleft {
              display: flex;
              align-items: center;
              height: 1rem;
              line-height: 1rem;
              margin-right: 0.4063rem;

              .pic {
                color: #f15353;
                font-size: 0.88rem;
                margin-right: 0.59rem;
              }

              .delpic {
                color: #999;
                font-size: 0.75rem;
                text-decoration: line-through;
              }
            }

            .foright {
              display: flex;
              align-items: center;
              height: 1rem;
              line-height: 1rem;

              .sold {
                color: #999;
                font-size: 0.6875rem;
              }
            }
          }
        }
      }

      .selectgoodsright {
        display: flex;
        align-items: center;

        .goright {
          width: 3.5rem;
          height: 1.75rem;
          line-height: 1.75rem;
          background-color: #F9F9F9;
          border-radius: 1.25rem;
          border: solid 1px #AAAAB3;
          line-height: 1.63rem;
          color: #00001C;
          font-size: 0.75rem;
          text-align: center;
        }
      }
   }

  .content {
    padding-bottom: 6.7188rem;

    .uploadphotolist {
      background: #fff;
      margin: 0.75rem;
      border-radius: 0.5rem;
      overflow: hidden;
      padding:0.75rem;
      box-sizing: border-box;

      ul {
        display: flex;
        flex-wrap: wrap;

        li {
          width: 5rem;
          height: 5rem;
          margin-left: 0.38rem;
          border-radius: 0.25rem;
          position: relative;

          img {
            width: 100%;
            height: 100%;
          }

          i {
            width: 1.2rem;
            height: 1.2rem;
            position: absolute;
            top: 0.1rem;
            right: 0.1rem;
            background: url("../../assets/images/close_iocn.png");
            background-size: 100%;
          }
        }
      }
    }

    .required-field {
      color: #f15353;
      font-weight: 600;
      font-size: 16px;
      // padding-right: 4px;
    }

    .textInput {

      .titleinp {
        display: flex;
        align-items: center;
        height: 2.5rem;
        border-bottom: 0.06rem solid #e5e5e5;
        margin-bottom: 0.78rem;
        input::placeholder{
          color: #ccc;
        }

        input {
          font-size: 1rem;
          height: 2.5rem;
          line-height: 2.5rem;
          text-align: left;
          flex: 1;
          border: none;
          outline: none;
        }
      }

      .contentinp {
        display: flex;
        height: 6.66rem;
        textarea::placeholder{
          color:#ccc;
        }

        textarea {
          font-size: 0.9375rem;
          height: 100%;
          width: 100%;
          text-align: left;
          border: none;
          outline: none;
        }
      }
    }

    .messageadd {
      background-color: #fff;
      border-radius: 0.5rem;
      overflow: hidden;
      margin: 0.75rem;
      padding-left: 0.75rem;
      padding-right: 0.625rem;
      ul {
        li {
          display: flex;
          line-height: 3rem;
          align-items: center;
          border-bottom: 1px solid #F0F0F1;
          font-size: 0.875rem;
          font-weight: bold;

          .left {
            display: flex;
            align-items: center;

          }

          .right {
            width: 80%;
            flex: 1;

            .inforselection {
              display: flex;
              align-items: center;
              justify-content: space-between;
              height: 100%;


              .inf_right {
                flex-shrink: 0;
                font-size: 1rem;
                width: 0.69rem;
                color: #999;
              }
            }

            .inforselection.selecolor {
              .inf_left {
                white-space: nowrap;
                text-align: left;
                overflow-x: scroll;
                flex:1;
                margin-right: 1.3125rem;
              }
            }



            .selectshop {
              display: flex;
              align-items: center;
              padding-top: 0.63rem;
              padding-bottom: 0.63rem;
              justify-content: space-between;

              .selectgoodsleft {
                display: flex;
                align-items: center;

                .goleft {
                  width: 3rem;
                  height: 3rem;
                  border-radius: 0.2rem;
                  border: 0.06rem solid #e5e5e5;
                  margin-right: 0.63rem;

                  img {
                    width: 100%;
                    height: 100%;
                  }
                }


              }

              .selectgoodsright {
                display: flex;
                align-items: center;

                .goright {
                  width: 3.75rem;
                  height: 1.63rem;
                  background-color: #fff;
                  border-radius: 0.25rem;
                  border: solid 0.06rem #e5e5e5;
                  line-height: 1.63rem;
                  color: #333;
                  font-size: 0.75rem;
                }
              }
            }
          }
        }
      }
    }
  }

  .user_protocol {
    font-size: 0.875rem;
    color: #00001C;
    margin-bottom: 0.9375rem;
    margin-left: 0.2188rem;
    .us_color {
      color: #5385D9;
    }
  }

  .Releasebtn {
    position: fixed;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.9375rem 0.75rem;
    background: #fff;

    .submit {
      line-height: 2.5rem;
      font-size: 0.9375rem;
      // height: 2.5rem;
      background-color: #f15353;
      border-radius: 1.875rem;
      color: #fff;

    }
  }

  .classification {
    width: 100%;
    height: 100%;

    .classification_list {
      padding-left: 0.72rem;

      ul {
        li {
          font-size: 12px;
          text-align: left;
          color: #333;
          margin-top: 1.125rem;

          .one_cat {
            line-height: 1;
            font-size: 0.875rem;
            font-weight: 500;
            color: #000;
          }

          .two_cat {
            display: flex;
            flex-wrap: wrap;

            .childs-name {
              border-radius: 1rem;
              padding: 0 0.75rem;
              margin-right: 0.75rem;
              font-size:0.875rem;
              font-weight: 500;
              color:#00001C;
              background: #f3f3f3;
              line-height: 1.5rem;
              margin-top:0.7188rem;
            }

            .color_text {
              background: #f15353;
              color: #fff;
            }
          }
        }
      }
    }
  }

  .Locations {
    width: 100%;
    height: 100%;
  }

  .addgoodslist,.storelist {
    width: 100%;
    height: 100%;

    .addgoodslist_list,.astorelist_list {
      padding: 0 0.75rem;
      ul {
        li {
          padding: 0.9375rem 0 0.9375rem;
          display: flex;
          align-items: center;
          border-bottom: solid 0.06rem #f5f5f5;

          .left {
            width: 3.125rem;
            height: 3.125rem;
            margin-right: 0.375rem;

            img {
              width: 100%;
              height: 100%;
              border-radius: 0.5rem;
            }
          }

          .center {
            width: 14.13rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .top {
              width: 14.13rem;
              font-size: 0.875rem;
              line-height: 1;
              color: #00001C;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              text-align: left;
              padding-bottom: 0.1563rem;
              font-weight: 500;
            }

            .bottom {
              display: flex;
              align-items: center;

              .picleft {
                font-size: 0.875rem;
                line-height:1;
                font-weight: 500;
                color: #f15353;
                margin-right: 1.16rem;
              }

              .picright {
                font-size: 0.75rem;
                line-height:1;
                color: #8c8c8c;
              }
            }
          }
          .right-current{
            width: 1.125rem;
            height: 1.125rem;
            margin-left: 2.38rem;
            border-radius: 50%;
            background-color: #FE5E56;
          }

          .right {
            width: 1.125rem;
            height: 1.125rem;
            border: 1px solid #AAAAB3;
            margin-left: 2.38rem;
            border-radius: 50%;
          }
        }
      }
    }
  }

  .storelist {
    .top{
        padding-bottom: 0.1563rem !important;
     }
    .start_1 {
      display: flex;
      text-align: left;
      line-height: 1;
      margin-bottom: 0.4688rem;
    }

    .fobottom {
      line-height: 1;
      width: 14.13rem;
      font-size: 0.75rem;
      color: #999;
      text-overflow: ellipsis;
      overflow: hidden;
      text-align: left;
    }
  }

  .searchbox {
    display: flex;

    .left {
      display: flex;
      align-items: center;
      margin-left: 0.94rem;
      flex: 1;
      line-height: 1.88rem;
      background-color: #f5f5f5;
      border-radius: 0.94rem;

      .searchion {
        font-size: 0.81rem;
        color: #999;
        margin-left: 0.5rem;
        margin-right: 0.41rem;
      }

      .van-cell {
        background-color: transparent;
        padding: 0;
      }

      input {
        border: none;
      }
    }

    .right {
      width: 3.6875rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.875rem;
      font-weight: 500;
      color: #333;
    }
  }

  // .van-popup {
  //   z-index: 201 !important;
  // }
}

.address-list-child-left {
  flex: 1;
  text-align: left;
  padding-right: 0.5rem;
  .address-shipping{
    font-size: 0.8125rem;
    font-weight: 400;
    color:#999;
  }

  .address-namenick {
    font-size: 0.8125rem;
    color: #00001C;
    display: flex;
    flex-direction: column;
    font-weight: bold;
    margin-bottom: 0.5313rem;
  }
}

.wxchooseImg {
  width: 5rem;
  height: 5rem;
  overflow: hidden;
  border: 1px dashed #c0ccda;
  margin-left: 0.2rem;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;

  .van-icon {
    font-size: 24px;
    line-height: 4.5rem;
    color: #666;
  }
}

.wxchooseImg {
  width: 5rem;
  height: 5rem;
  overflow: hidden;
  border: 1px dashed #c0ccda;
  margin-left: 0.2rem;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;

  .van-icon {
    font-size: 24px;
    line-height: 4.5rem;
    color: #666;
  }
}
</style>
